<template>
  <div class="pages">
    <!-- 主体内容 --->
    <section
      class="phone-container"
      :style="{
        'background-color': templateJson.bgColor,
        backgroundImage: 'url(' + templateJson.bgImg + ')',
      }"
    >
      <div class="pointer-events">
        <!-- <!- 动态组件 -->
        -->
        <component
          :is="item.component"
          v-for="(item, index) in component"
          :key="index"
          :datas="item.setStyle"
          @click.native="activeComponent(item, index)"
          class="componentsClass"
          :data-type="item.type"
        >
        </component>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      data: {
        id: null,
        name: '页面标题',
        templateJson:
          '{"name":"页面标题","details":"","isPerson":false,"isBack":true,"titleHeight":35,"bgColor":"rgba(249, 249, 249, 10)","bgImg":""}',
        component:
          '[{"component":"storenotecard","text":"文章模块","type":"2-2","active":true,"style":"storenotecardstyle","setStyle":{"text":"文章模块","name":"这里显示专题名称","commodityType":0,"moditystyle":0,"borderRadius":0,"textWeight":400,"noteLabels":true,"readingNumber":true,"praisePoints":true,"viewMore1":true,"viewMore2":true,"imageList":[],"positions":"bottom","linktype":"10","http":{}}}]',
      },
      templateJson: {},
      component: [],
    }
  },
  mounted() {
    this.parseData()
    console.log(this.$route.params.id)
    this.$wx_js_sdk.wxcall(
      this,
      1,
      '测试页面',
      '拖拽组件测试微信分享',
      'https://img0.baidu.com/it/u=3628503530,464378779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
      'https://www.baidu.com/'
    )
  },
  methods: {
    parseData() {
      axios
        .get('https://www.yunxianchang.com/backend/aseditor/4')
        .then((res) => {
          // 请求成功，处理响应数据
          console.log(res.data)
          console.log(res.data)
          this.templateJson = JSON.parse(res.data.page_setup)
          console.log('templateJson==', this.templateJson)
          this.component = JSON.parse(res.data.page_components)
          console.log('component==', this.component)
        })
        .catch((error) => {
          // 请求失败，处理错误信息
          console.error(error)
        })
    },
  },
}
</script>
<style lang="less" scoped>
.pages {
  max-width: 550px;
  margin: auto;
  padding: 0px;
  position: relative;
}
</style>
